<template>
	<view class="container">
		<view class="waterfall">
			<view class="flex1 mgr-20">
				<view class="item" v-for="(item,index) in leftList" @click="navToDtl(item)">
					<image :src="item.fileurls[0]"  :style="{height: (index%2 == 0 ?'424rpx':'444rpx')}" mode="aspectFill"></image>
					<view class="pdx-10">
						<view class="flex jc_between ai_center mgt-20">
							<view class="title">{{ item.style }}</view>
							<view class="button">{{ item.tool }}</view>
						</view>
						<view class="time">{{ item.createtime }}</view>
					</view>
				</view>
			</view>
			<view class="flex1">
				<view class="item" v-for="(item,index) in rightList" @click="navToDtl(item)">
					<image :src="item.fileurls[0]" :style="{height: (index%2 == 0 ?'444rpx':'424rpx')}" mode="aspectFill"></image>
					<view class="pdx-10">
						<view class="flex jc_between ai_center mgt-20">
							<view class="title">{{ item.style }}</view>
							<view class="button">{{ item.tool }}</view>
						</view>
						<view class="time">{{ item.createtime }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				leftList: [],
				rightList: [],
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			navToDtl(item){
				uni.navigateTo({
					url: '/pages/galleryDetail/galleryDetail?id=' + item.id
				});
			},
			getList() {
				this.get('tool/gallery').then(res => {
					let list = res.data.list && res.data.list.data
					list = list.filter(item=>{return item.fileurls[0] })
					this.leftList = list.filter((item,index)=>{ return index% 2==0 })
					this.rightList = list.filter((item,index)=>{ return index% 2!=0 })
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-image: url('@/static/image/bg.png');
		background-size: 100% 100%;
		padding: 28rpx 46rpx;
	}

	.waterfall {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.flex1 {
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
		-webkit-box-flex: 1;
		-moz-box-flex: 1;
	}

	.item {
		margin-bottom: 20rpx;
		background-color: #fff;
		box-sizing: border-box;
		border-radius: 20rpx;
	}

	.item image {
		width: 100%;
		height: 444rpx;
		border-radius: 20rpx;
	}
	.title{
		max-width: 166rpx;
		font-size: 28rpx;
		 overflow: hidden;
		  text-overflow: ellipsis;
		  display: -webkit-box;
		  -webkit-line-clamp: 1;
		  -webkit-box-orient: vertical;
	}
	.button{
		width: 104rpx;
		text-align: center;
		height: 36rpx;
		line-height: 36rpx;
		font-size: 20rpx;
		color: #3AC9B5;
		border: 1rpx solid rgba(30, 211, 148, 1);
		// border-image: linear-gradient(116deg, rgba(30, 211, 148, 1), rgba(4, 183, 184, 1)) 1 1;
		border-radius: 8rpx;
		background: rgba(37,255,231,0.07);
	}
	.time{
		padding: 24rpx 0;
		font-size: 24rpx;
		color: #999999;
	}
</style>